<template>
  <div class="c-bg-sgray">
    <section class="c-bg-white">
      <my-small-tabbar :tabList="tabList" :tabIndex="type" @changeTab="changeType"></my-small-tabbar>
    </section>
    <div class="c-bg-sgray c-ph24" :class="dataInfo == '' || dataInfo.length == 0 ? '' : 'c-pt24'">
      <div v-if="dataInfo && dataInfo.length > 0">
        <div class="c-flex-row c-justify-sb c-ph24 c-pv24 c-br12 c-mb24 c-bg-white" v-for="(item,index) in dataInfo" :key="index" @click="goDetail(item.id,index)">
          <div class="c-ww180 c-maxh120 c-text-hidden c-flex-shrink0 c-br12">
            <img v-lazy="item.avatar || require('../../../assets/defult270.png')" class="c-w100 c-block c-maxh imgCloseBig c-br12" />
          </div>
          <div class="c-maxh120 c-flex-column c-justify-start c-pl20 c-flex-grow1">
            <div class="c-text-ellipsis2 c-fs24 c-fc-xblack">{{item.name}}</div>
          </div>
        </div>
      </div>
    </div>
    <loading-status-tem :noData="dataInfo == null || dataInfo.length == 0" :noMoreData="is_page == false && dataInfo && dataInfo.length > 0" :noDataText="'暂无相关记录'"></loading-status-tem>
  </div>
</template>

<script>
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import { utilJs } from "@/utils/common.js"
import { goDetails } from "@/utils/goDetails.js";
export default {
  name: 'WatchList',
  components: {
    MySmallTabbar,
    loadingStatusTem
  },
  props: [],
  beforeCreate() {

  },
  data() {
    return {
      theme: localStorage.getItem("colorName") || 'mb5_default',
      is_page: false,
      page: 1,
      limit: 10,
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      cfrom: global.ckFrom,
      type: 5,
      ckFrom: global.ckFrom.course,
      dataInfo: '',
      isLoading: false,
      tabList: [{
        title: '课程',
        index: 5,
      }, {
        title: '专栏',
        index: 9,
      }, {
        title: '训练营',
        index: 78,
      }],
    }
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {

  },
  computed: {

  },
  watch: {

  },
  methods: {
    //获取课程/专栏/训练营的观看记录
    changeType(type) {
      this.type = type;
      this.dataInfo = '';
      this.page = 1;
      this.getList();
    },
    goDetail: function (id, index) {
      let prodType = this.type;
      prodType = this.type == 54 ? global.ckFrom.column : prodType;
      let query = {}
      if (this.type == 54) {
        query.distribution = '1';
      }
      goDetails(this, prodType, id, query, this.dataInfo[index].courseType);
    },
    //分页获取观看记录
    getList: function () {
      if (this.isLoading) {
        return
      }
      // this.dataInfo = "";
      this.isLoading = true;
      let $this = this;
      utilJs.getMethod(global.apiurl + 'members/playRecords?ckFrom=' + this.type + '&page=' + this.page + '&limit=' + this.limit, function (res) {
        if (res.data) {
          if ($this.page == 1) {
            $this.dataInfo = res.data ? res.data : [];
          } else {
            let list = res.data;
            $this.dataInfo = $this.dataInfo.concat(list);
          };
        }
        $this.page = res.data && (res.data.length >= $this.limit) ? ($this.page + 1) : $this.page;//res.current_page < res.last_page ? ($this.page + 1) : $this.page;
        $this.is_page = res.data && (res.data.length >= $this.limit) ? true : false;//res.current_page < res.last_page;
        $this.isLoading = false;
      });
    },
    //分享
    wechatShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.wechatConfig(shareUrl, "学习记录", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("学习记录", "", shareUrl, "");
    },
    //下拉加载更多
    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(function () {
        if (that.is_page == true) {
          that.getList();
        }
      });
    },
    initData() {
      this.dataInfo = [];
      this.page = 1;
      this.is_page = false;
      this.getList();
    }
  },
  activated() {
    //课程，专栏的观看记录
    setDocumentTitle("浏览记录");// eslint-disable-line

    if (!utilJs.isIOSAppALL()) {
      this.tabList = [{
        title: '课程',
        index: 5,
      }, {
        title: '专栏',
        index: 9,
      }, {
        title: '训练营',
        index: 78,
      }, {
        title: '内容专栏',
        index: 54,
      }];
    }
    if (utilJs.checkNeedInitData(this.dataInfo, this.page)) {
      this.initData();
    }

    this.wechatShare();
    this.isLoading = false;
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    // this.is_page = false;
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
